import React from "react";
import { connect } from "react-redux";
// import { Button } from "antd-mobile";
import fns from "../store/asyncMethods";
import loadingImg from "../assets/img/loading.gif";

class DatiCom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentTimu: 0,
      optionsStyle: ["optionItem", "optionItem", "optionItem", "optionItem"],
      isChoice: false,
      score: 0,
    };
  }

  componentDidMount() {
    this.props.getTimu();
  }

  answerEvent = (index) => {
    if (this.state.isChoice) {
      return;
    }

    console.log(index);
    let currentAnswer = this.props.timuList[this.state.currentTimu].answer;
    console.log(currentAnswer);

    if (index + 1 === Number(currentAnswer)) {
      let optionsStyle = this.state.optionsStyle;
      optionsStyle[index] = "optionItem correct";
      this.setState({
        optionsStyle: optionsStyle,
        isChoice: true,
        score: this.state.score + 10,
      });
    } else {
      let optionsStyle = this.state.optionsStyle;
      optionsStyle[index] = "optionItem error";
      optionsStyle[Number(currentAnswer) - 1] = "optionItem correct";
      this.setState({
        optionsStyle: optionsStyle,
        isChoice: true,
        score: this.state.score - 10,
      });
    }

    //2s后跳转至下一题
    setTimeout(() => {
      if (this.state.currentTimu + 1 === 10) {
        this.props.history.push("/result",{score:this.state.score})
      } else {
        this.setState({
          currentTimu: this.state.currentTimu + 1,
          optionsStyle: [
            "optionItem",
            "optionItem",
            "optionItem",
            "optionItem",
          ],
          isChoice: false,
        });
      }
    }, 1000);
  };

  render() {
    console.log(this.props);

    let timuArr = this.props.timuList;
    let currentNum = this.state.currentTimu;
    let optionsStyle = this.state.optionsStyle;

    //如果数据没有加载进来，就设置为loading
    if (timuArr.length > 0) {
      let options = JSON.parse(timuArr[currentNum].options);
      return (
        <div className="datiPage">
          <h2>
            {currentNum + 1}-{timuArr[currentNum].quiz}
          </h2>
          <div className="options">
            {options.map((item, index) => {
              return (
                <div
                  className={optionsStyle[index]}
                  key={index}
                  onClick={() => this.answerEvent(index)}
                >
                  {index + 1}:{item}
                </div>
              );
            })}
          </div>
        </div>
      );
    } else {
      return (
        <div>
          <img src={loadingImg} alt="Loading" />
        </div>
      );
    }
  }
}

//将state映射到props函数
const mapStateToProps = (state) => {
  return {
    ...state,
  };
};

//将修改state数据的方法映射到props
const mapDispatchToProps = (dispatch) => {
  return {
    onAddClick: () =>
      dispatch({
        type: "add",
      }),
    getTimu: async () => {
      let list = await fns.TiMuList();
      dispatch({ type: "setTimu", content: list });
      console.log(list);
    },
  };
};

//将上面的这两个方法，将数据仓库的state和修改state的方法映射到组件上，形成新的组件
const Dati = connect(mapStateToProps, mapDispatchToProps)(DatiCom);

export default Dati;
